<template>
  <div class="inquiryrecords">
    <el-main>
      <el-row style="margin-bottom: 10px;">
        <el-col :span="2" style="text-align: right;margin-top: 7px;">采购员：</el-col>
        <el-col :span="4">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-col :span="4">
            <div style="text-align: right;margin-top: 7px;">搜索：</div>
          </el-col>
          <el-col :span="13">
            <el-input v-model="input" placeholder="请输入编码/商品查询"></el-input>
          </el-col>
          <el-col :span="4" style="margin-left: 5px;">
            <el-button type="primary" v-if="!isscreen">查询</el-button>
          </el-col>
        </el-col>
        <el-col :span="3">
          <div @click="isscreenfunc" style="width: 100%;text-align: right;margin-top: 7px;">
            <el-link :underline="false" type="primary"><span v-if="isscreen">收起</span>高级筛选</el-link>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px;" v-if="isscreen">
        <el-col :span="2" style="text-align: right;margin-top: 7px;">询价日期：</el-col>
        <el-col :span="4">
          <el-date-picker v-model="value1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row v-if="isscreen" style="margin-bottom: 10px;">
        <el-col :span="4" :offset="2">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="350" border style="width: 100%">
        <el-table-column prop="date" label="商品编码" width="180">
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="address" label="一级分类">
        </el-table-column>
        <el-table-column prop="address" label="二级分类">
        </el-table-column>
        <el-table-column prop="address" label="采购员">
        </el-table-column>
        <el-table-column prop="address" label="商品单位">
        </el-table-column>
        <el-table-column prop="address" label="询价">
        </el-table-column>
        <el-table-column prop="address" label="询价时间">
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isscreen: false
      }
    },
    methods: {
      isscreenfunc() {
        this.isscreen = !this.isscreen
      }
    }
  }
</script>

<style>
  .inquiryrecords .el-date-editor--daterange.el-input__inner,
  .inquiryrecords .el-select.el-select--small {
    width: 100% !important;
  }
</style>
